<template>
  <div class="customTextAreaWrap">
    <a-textarea
      class="textareaComp"
      :maxLength="maxLen"
      :rows="rows"
      :value="val"
      @change="handlerInput"
      :placeholder="placeholder"/>
    <span class="tip">{{ val.length }}/{{ maxLen }}</span>
  </div>
</template>
<script>
export default {
  props: {
    rows: {
      type: Number,
      default: 5
    },
    maxLen: {
      type: Number,
      default: 10
    },
    val: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handlerInput (e) {
      console.log(e, e.target.value, 'value')
      this.$emit('change', e.target.value)
    }
  }
}
</script>
<style scoped lang="less">
.customTextAreaWrap {
    position: relative;
    .textareaComp {
        overflow: auto;
        resize:none;
        padding-bottom: 30px
    }
    .tip {
        position: absolute;
        bottom: -30px;
        right: 10px;
        font-size: 0.8em;
        color: #ccc;
    }
}
</style>
